<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IoT</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <body>
            <div class="container mt-3">
                <div class="new-glass"></div>
                <h1 class="display-1 text-center text-white">花卉物联</h1>
                <ul class="list-group">
                    <li class="list-group-item">
                        <img src="./img/light.png" class="rounded-circle float-start" width="15%" height="15%">
                        <span class="display-6 text-center">补光灯</span>
                        <button class="btn btn-success float-end" id="led">开</button>
                    </li>
                    <li class="list-group-item">
                        <img src="./img/tap.png" class="rounded-circle float-start" width="15%" height="15%">
                        <span class="display-6 text-center">补水</span>
                        <button class="btn btn-success float-end" id="tap">开</button>
                    </li>
                    <li class="list-group-item">
                        <span class="display-6 text-center float-start">温度</span>
                        <span class="text-center float-end" id="tem"></span>
                    </li>
                    <li class="list-group-item">
                        <span class="display-6 text-center float-start">湿度</span>
                        <span class="text-center float-end" id="hum"></span>
                    </li>
                    <li class="list-group-item">
                        <span class="display-6 text-center float-start">光照度</span>
                        <span class="text-center float-end" id="lux"></span>
                    </li>
                    <li class="list-group-item">
                        <span class="display-6 text-center float-start">水位高度</span>
                        <span class="text-center float-end" id="dis"></span>
                    </li>
                </ul>
            </div>
        </body>
        <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
        <script>
            var _result = new Object();
            const options = {
                port: 8080,
                clientId: "mqtt_" + Math.random().toString(16).substr(2, 8)
            }
            
            const client = mqtt.connect("ws://test.ranye-iot.net", options);
            
            $("#led").click(function () {
                if ( $("#led").hasClass("btn-success") ) {
                    $("#led").removeClass("btn-success");
                    $("#led").addClass("btn-danger");
                    $("#led").text("关");
                    
                    client.publish("mukingice/ctrl/pub", '{"led": 1}', {
                        qos: 1,
                        retain: false
                    }, (err) => {
                        console.log(err);
                    });
                } else {
                    $("#led").removeClass("btn-danger");
                    $("#led").addClass("btn-success");
                    $("#led").text("开");
                    
                    client.publish("mukingice/ctrl/pub", '{"led": 0}', {
                        qos: 1,
                        retain: false
                    }, (err) => {
                        console.log(err);
                    });
                }
            });
            
            $("#tap").click(function () {
                if ( $("#tap").hasClass("btn-success") ) {
                    $("#tap").removeClass("btn-success");
                    $("#tap").addClass("btn-danger");
                    $("#tap").text("关");
                    
                    client.publish("mukingice/ctrl/pub", '{"tap": 1}', {
                        qos: 1,
                        retain: false
                    }, (err) => {
                        console.log(err);
                    });
                } else {
                    $("#tap").removeClass("btn-danger");
                    $("#tap").addClass("btn-success");
                    $("#tap").text("开");
                    
                    client.publish("mukingice/ctrl/pub", '{"tap": 0}', {
                        qos: 1,
                        retain: false
                    }, (err) => {
                        console.log(err);
                    });
                }
            });
            
            client.on("connect", (e) => {
                alert("连接成功");
                client.subscribe("mukingice/ctrl/sub", {qos: 1}, function (error) {
                    console.log(error);
                });
            });
            client.on("message", (topic, message) => {
                let msg = message.toString();
                let content = JSON.parse(msg);
                _result = {
                    tem: content.temperature,
                    hum: content.humidity,
                    lux: content.lux,
                    dis: content.distance,
                    led: content.led,
                    tap: content.tap
                }
                
                $("#tem").text(_result.tem);
                $("#hum").text(_result.hum);
                $("#lux").text(_result.lux);
                $("#dis").text(_result.dis);
                
                if ( _result.led == "0" ) {
                    $("#led").removeClass("btn-success");
                    $("#led").addClass("btn-danger");
                    $("#led").text("关");
                } else {
                    $("#led").removeClass("btn-danger");
                    $("#led").addClass("btn-success");
                    $("#led").text("开");
                }
                
                if ( _result.tap == "0" ) {
                    $("#tap").removeClass("btn-success");
                    $("#tap").addClass("btn-danger");
                    $("#tap").text("关");
                } else {
                    $("#tap").removeClass("btn-danger");
                    $("#tap").addClass("btn-success");
                    $("#tap").text("开");
                }
            });
            client.on("reconnect", (error) => {
                console.log("正在重连", error);
            });
            client.on("error", (error) => {
                console.log("连接失败", error);
            });
            
        </script>
    </head>
</html>